<template>
  <div style="margin-top: 20px; padding: 10px; border: 1px solid #000">
    <div>子组件</div>
    <el-button @click="counterStore.increment()" type="primary">加</el-button>
    <el-button @click="counterStore.decrement()">减</el-button>
    <div>count: {{ counterStore.count }}</div>
    <div>doubleCount: {{ counterStore.doubleCount }}</div>
    <div>name: {{ counterStore.name }}</div>
    <el-button @click="counterStore.changeName('newName')">changeName</el-button>
  </div>
</template>

<script setup lang="ts">
import { useCounterStore } from '@/stores/counter'
const counterStore = useCounterStore()
</script>

<style scoped></style>
